import React, { useState, useEffect } from 'react'
import axios from "axios";
import '../wch/css/login.css'
import '../wch/css/phone.css'
import { UserOutline, BankcardOutline, FaceRecognitionOutline, MailOutline, PhonebookOutline } from 'antd-mobile-icons'
import { NavBar, Toast, Input, Footer } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
export default function Login() {
    // 路由跳转
    const navigate = useNavigate()
    const back = () => {
        navigate('/login')
    }

    const email = () => {
        navigate('/email')
    }

    const face = () => {
        navigate('/face')
    }

    const register = () => {
        navigate('/register')
    }

    // 点击边框变色
    const [clickedElement, setClickedElement] = useState(null);

    const handleClick = (id) => {
        setClickedElement(id); // 设置当前点击的元素 ID
    };

    const getBorderStyle = (id) => {
        if (clickedElement === id) {
            return { borderColor: '#ff6262' }; // 如果当前元素被点击，返回橙色边框样式
        }
        return {}; // 否则返回空对象，即默认边框样式
    };

    // 手机号登录
    const [val, setVal] = useState('');
    const [phone, setPhone] = useState('');
    const [code, setCode] = useState('');
    const yzm = async () => {
        let reg = /^1[3456789]\d{9}$/
        if (phone === "") {
            Toast.show({
                content: "请输入手机号"
            })
            return
        }
        if (!reg.test(phone)) {
            Toast.show({
                content: '手机号格式不正确'
            })
            return
        }
        let { data } = await axios.post('http://127.0.0.1:3000/SMS', { phone })
        console.log(data.data);
        startCountdown()
        setCode(data.data)
    }

    // 点击获取验证码倒计时
    const [numflag, setNumflag] = useState(false) // 倒计时flag
    const [countdown, setCountdown] = useState(60)// 倒计时渲染
    const startCountdown = () => {
        setNumflag(true)
        const intervalId = setInterval(() => {
            setCountdown(item => {
                if (item === 1) {
                    clearInterval(intervalId)
                    setCountdown(60)
                    setNumflag(false)
                    return 60
                } else {
                    return item - 1
                }
            })
        }, 2000)
    }
    useEffect(() => {
        if (countdown === 60) {
            setNumflag(false)
        }
    }, [countdown])
    const login = async () => {
        let reg = /^1[3456789]\d{9}$/
        if (phone === "") {
            Toast.show({
                content: "请输入手机号"
            })
            return
        }
        if (!reg.test(phone)) {
            Toast.show({
                content: '手机号格式不正确'
            })
            return
        }
        if (val === "") {
            Toast.show({
                content: "请输入验证码"
            })
            return
        }
        if (val !== code) {
            Toast.show({
                content: "验证码不正确"
            })
            return
        }
        let res = await axios.post("http://127.0.0.1:3000/login", { phone, code })
        console.log(res.data.data[0]._id);
        localStorage.setItem("_id", res.data.data[0]._id)
        localStorage.setItem('useName', res.data.data[0].username)
        if (res.data.code) {
            navigate('/index_d')
        } else {
            Toast.show({
                content: '登录失败'
            })
        }
    }
    return (
        <div id='li_login'>
            {/* 导航栏 */}
            <div id='login_header'>
                <div id='header_inco' onClick={back}>
                    <NavBar></NavBar>
                </div>
            </div>
            {/* 本机手机号码登录 */}
            <div id='login_content'>
                <div id='login_content1'>
                    <div id='login_content_inco'>
                        <div id='login_content_p'>票</div>
                    </div>
                </div>
                <div id='login_content2'>手机号码登录</div>
            </div>

            {/* 手机号登录 */}
            <div id="li_phone">
                <div id='li_number' style={getBorderStyle('li_number')} onClick={() => handleClick('li_number')}>
                    <div id='number_inco'>
                        <UserOutline color='#ff976a' />&nbsp;&nbsp;<span>+86</span>
                    </div>
                    {/* 手机号 */}
                    <div id='number_input'>
                        <Input placeholder='请输入手机号码' value={phone} onChange={(e) => setPhone(e)}></Input>
                    </div>
                </div>
                {/* 验证码 */}
                <div id='li_yzm' style={getBorderStyle('li_yzm')} onClick={() => handleClick('li_yzm')}>
                    <div id='yzm_inco'><BankcardOutline color='#ff976a' /></div>
                    <div id='yzm_input'>
                        <Input placeholder='请输入验证码' value={val} onChange={(e) => setVal(e)}></Input>
                    </div>
                    <div id='find_yzm' onClick={yzm} disabled={numflag}>{numflag ? countdown : '获取验证码'}</div>
                </div>
            </div>
            <div id='login_div' onClick={login}>登录</div>

            <div id='login_qh' onClick={register}>未注册的用户将要去创建新账号</div>

            <div id='login_div1'>
                <Footer label='或通过一下方式登录'></Footer>
            </div>

            <div id='login_footer'>
                {/* <div id='login_footer1'><img src='https://cdn7.axureshop.com/demo/1564251/images/%E4%B8%80%E9%94%AE%E7%99%BB%E5%BD%95/u1987.png' /></div>
                <div id='login_footer1'><img src='https://cdn7.axureshop.com/demo/1564251/images/%E4%B8%80%E9%94%AE%E7%99%BB%E5%BD%95/u1984.png' /></div>
                <div id='login_footer1'><img src='https://cdn7.axureshop.com/demo/1564251/images/%E4%B8%80%E9%94%AE%E7%99%BB%E5%BD%95/u1974.png' /></div> */}
                <div id='login_footers' onClick={face}><div style={{ marginLeft: '8px', marginTop: '7px', color: '#ff976a' }}><PhonebookOutline /></div></div>
                <div id='login_footers' onClick={face}><div style={{ marginLeft: '8px', marginTop: '7px', color: '#ff976a' }}><FaceRecognitionOutline /></div></div>
                <div id='login_footers' onClick={email}><div style={{ marginLeft: '8px', marginTop: '7px', color: '#ff976a' }}><MailOutline /> </div></div>
            </div>

            <div id='login_out'>
                <div id='login_footer2'>登录或注册代表您同意<span style={{ color: '#ff7363' }}>用户服务协议</span></div>
            </div>

        </div>
    )
}
